<script lang="ts" setup>
import { $ } from '../lib/request';
import { ref, reactive, onMounted } from '@vue/runtime-core';
import { infoStore } from '../lib/store/info';
import { useRoute, useRouter } from 'vue-router';
import { modal } from "vxe-table";
// 登录页
import { sha256_digest } from "/src/lib/encrypt/sha256.js";
const lay = ref({} as any)
// $.get("/oa/oa/info/insPortalDef/mobilePortalHtml.do").then(res => { lay.value = JSON.parse(res.data.data[0].layoutHtml) })


// 验证码生成
const { state, verify, handleDraw } = ((ref, reactive, onMounted) => {
    const verify = ref()
    const state = reactive({
        pool: '123456789验证码ABCDEFGHJKLMNPQRSTUVWXYZ', // 生成验证码的字符集
        width: 120,
        height: 40,
        imgCode: ''
    })
    onMounted(() => {
        // 初始化绘制图片验证码
        state.imgCode = draw()
    })

    // 点击图片重新绘制
    const handleDraw = () => {
        state.imgCode = draw()
    }

    // 随机数
    const randomNum = (min: number, max: number) => {
        return Math.trunc(Math.random() * (max - min) + min)
    }
    // 随机颜色
    const randomColor = (min: number, max: number) => {
        const r = randomNum(min, max)
        const g = randomNum(min, max)
        const b = randomNum(min, max)
        return `rgb(${r},${g},${b})`
    }

    // 绘制图片
    const draw = () => {
        // 3.填充背景颜色，背景颜色要浅一点
        const ctx = verify.value?.getContext('2d')
        // 填充颜色
        ctx.fillStyle = randomColor(180, 230)
        // 填充的位置
        ctx.fillRect(0, 0, state.width, state.height)
        // 定义paramText
        let imgCode = ''
        // 4.随机产生字符串，并且随机旋转
        for (let i = 0; i < 4; i++) {
            // 随机的四个字
            const text = state.pool[randomNum(0, state.pool.length)]
            imgCode += text
            // 随机的字体大小
            const fontSize = randomNum(22, 40)
            // 字体随机的旋转角度
            const deg = randomNum(-30, 30)
            /*
             * 绘制文字并让四个文字在不同的位置显示的思路 :
             * 1、定义字体
             * 2、定义对齐方式
             * 3、填充不同的颜色
             * 4、保存当前的状态（以防止以上的状态受影响）
             * 5、平移translate()
             * 6、旋转 rotate()
             * 7、填充文字
             * 8、restore出栈
             * */
            ctx.font = fontSize + 'px Simhei'
            ctx.textBaseline = 'top'
            ctx.fillStyle = randomColor(80, 150)
            /*
             * save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。
             * 这就允许您临时地改变图像状态，
             * 然后，通过调用 restore() 来恢复以前的值。
             * save是入栈，restore是出栈。
             * 用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
             *
             * */
            ctx.save()
            ctx.translate(30 * i + 15, 15)
            ctx.rotate((deg * Math.PI) / 180)
            // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
            // 请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
            // context.fillText(text,x,y,maxWidth);
            ctx.fillText(text, -15 + 5, -15)
            ctx.restore()
        }
        // 5.随机产生5条干扰线,干扰线的颜色要浅一点
        for (let i = 0; i < 5; i++) {
            ctx.beginPath()
            ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height))
            ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height))
            ctx.strokeStyle = randomColor(180, 230)
            ctx.closePath()
            ctx.stroke()
        }
        // 6.随机产生40个干扰的小点
        for (let i = 0; i < 40; i++) {
            ctx.beginPath()
            ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.fillStyle = randomColor(150, 200)
            ctx.fill()
        }
        return imgCode
    }
    return {
        state,
        verify,
        handleDraw
    }

})(ref, reactive, onMounted);
const inputValue = reactive({
    acc: 'root',
    pd: '1',
    verify: ''
});
const isLoginWait = ref(false);
const info = infoStore();
const route = useRoute(), router = useRouter();


// 登录
const handleLogin = () => {
    const { acc, pd, verify } = inputValue
    if (!(acc && pd)) {
        modal.message({ content: '账号和密码不能为空', status: 'error' })
        return;
    } 
    // if (!verify) {
    //     modal.message({ content: '验证码不能为空', status: 'error' })
    //     return;
    // }
    if (verify && state.imgCode != verify.toUpperCase()) {
        handleDraw();
        modal.message({ content: '验证码错误', status: 'error' })
        return;
    }
    isLoginWait.value = true
    $.get(
        '/oa/saas/login.do',
        {
            params: {
                acc: inputValue.acc,
                pd: sha256_digest(inputValue.pd)
            }
        }
    ).then(({ data }) => {
        console.log('登录返回得data',data);
        if (data.success) {
            info.setNickname({ nickname: data.data?.username });
            info.setVerify({ verify: data.data?.verify });
            if (route.query.to) {
                router.replace(route.query.to as string)
            } else {
                router.push({ name: 'home' });
            }
        } else {
            modal.message({ content: '登录失败', status: 'error' });
        }
        isLoginWait.value = false
    }).catch((err) => {
        modal.message({ content: '连接服务器失败', status: 'error' });
        isLoginWait.value = false
    })
}
</script>
<template lang="pug">

.h-screen.w-screen.absolute.bg-login
.text-gray-900.text-6xl.absolute.left-0.right-0.h-32.flex.items-center.justify-center.font-extrabold 5G砂石骨料
.h-screen.flex.items-center.justify-end.relative.bg-opacity-10.bg-green-400
    div(class="container shadow-xl max-w-md bg-white py-8 transition-all sm:rounded-xl md:mx-10")
        .px-4(v-for="item in lay") {{ item.type }}:{{ item.title }}
            .px-4(v-for="it in lay") 
                textarea(cols="30", rows="10") {{ it }}
        .text-2xl.font-medium.text-black.pb-8 登录
        .text-green-500 账号
        input.rounded-xl.block.bg-gray-100.w-full.py-2.px-7.outline-none.mb-3(type="text" v-model="inputValue.acc")
        .text-green-500 密码
        input.rounded-xl.block.bg-gray-100.w-full.py-2.px-7.outline-none.mb-3(type="password" v-model="inputValue.pd")
        .text-green-500 请输入验证码
        .flex.items-center.gap-2
            canvas.h-8.w-32.bg-green-200(ref="verify" width="120" height="40" @click="handleDraw")
            input.flex-auto.outline-none.bg-gray-100.rounded-xl.py-2.px-7.w-full(v-model="inputValue.verify")
        .flex.items-center.justify-center.pt-12
            button(class="w-full bg-green-500 text-white py-2 transition-all hover:bg-green-300 hover:shadow-md active:bg-green-400 flex items-center justify-center" @click="handleLogin" :disabled="isLoginWait")
                svg.animate-spin.-ml-1.mr-3.h-5.w-5.text-white(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" v-if="isLoginWait")
                    circle.opacity-25(cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4")
                    path.opacity-75(fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z")
                | 登录
</template>
<style lang="scss" scoped>
@import "/src/tailwind.scss";
.bg-login {
    background-image: url("/src/res/bg/login.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    // filter: blur(16px);
}
</style>